<div ng-controller="ProfileGroupsController">
    <div class="pad_top">
        <button type="button" ng-click="openCreateGroupModal()" class="ice-button">Create Private Group</button>
    </div>

    <div class="pad_top" ng-if="!userGroups.data || !userGroups.data.length">
        <i class="text-muted">You have not created any private groups</i>
    </div>

    <table class="table table-hover pad_top table-border-bottom" ng-if="userGroups.data.length"
           style="width: 98%;">
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th style="width: 360px">
                <span class="entry-table-header">Label</span>
            </th>
            <th style="width:180px; white-space:nowrap">
                <span class="entry-table-header">Members</span>
            </th>
            <th>
                <span class="entry-table-header">Created</span>
            </th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="group in userGroups.data">
            <td class="font-14em table-row-index">
                <b>{{$index+1}}</b>
            </td>
            <td>{{group.label}}
                <br>
                <i class="small text-muted">{{group.description}}</i>
            </td>
            <td style="vertical-align: middle">
                <span class="label"
                      ng-class="{
                      'label-primary': group.memberCount,
                      'label-default': group.memberCount == 0}">{{group.memberCount | number}}
                </span>
            </td>
            <td style="width:180px; vertical-align: middle">
                <small class="text-muted">{{group.creationTime | date:'MMM d, yyyy, h:mm a'}}</small>
            </td>
            <td style="width:150px; white-space:nowrap; vertical-align: middle" ng-if="user.email==group.ownerEmail">
                <div ng-if="!group.confirmDeleteGroup">
                    <i class="fa fa-fw fa-pencil font-14em edit_icon" uib-tooltip="Edit"
                       ng-click="openCreateGroupModal(group)"></i>
                    &nbsp;
                    <i class="fa fa-fw fa-trash font-14em delete_icon" ng-click="group.confirmDeleteGroup = true"
                       uib-tooltip="Delete"></i>
                </div>

                <div ng-if="group.confirmDeleteGroup">
                    Delete?
                    <button class="btn btn-primary btn-xs" ng-click="deleteUserGroup(group)">Yes</button>
                    <button class="btn btn-default btn-xs" ng-click="group.confirmDeleteGroup=false">No</button>
                </div>
            </td>
            <td style="width:150px;" ng-if="user.email!=group.ownerEmail">
                <i class="fa fa-fw fa-user-times font-14em delete_icon" uib-tooltip="Leave"></i>
            </td>
        </tr>
        </tbody>
    </table>
</div>

